import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 交织动画
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoveContent(),
    );
  }
}

class LoveContent extends StatefulWidget {
  @override
  _LoveContentState createState() => _LoveContentState();
}

class _LoveContentState extends State<LoveContent>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  // 大小动画
  Animation _sizeAnimation;

  // 颜色动画
  Animation _colorAnimation;

  // 旋转动画
  Animation _rotaAnimation;

  // 透明度动画
  Animation _alphaAnimation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));

    _sizeAnimation = Tween<double>(begin: 0.0, end: 150.0).animate(_controller);
    _colorAnimation =
        ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);
    _alphaAnimation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    // 2pi 转两圈
    _rotaAnimation = Tween(begin: 0.0, end: 2 * pi).animate(_controller);

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("交织动画"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          _controller.forward();
        },
      ),
      body: Center(
        // Opacity可以改变Child的透明度0~1
        child: AnimatedBuilder(
          animation: _controller,
          builder: (ctx, child) {
            return Opacity(
              opacity: _alphaAnimation.value,
              // 包裹Transform方便控制旋转角
              child: Transform(
                transform: Matrix4.rotationZ(_rotaAnimation.value),
                // 以中心点对齐，作为旋转原点
                alignment: Alignment.center,
                child: Container(
                  color: _colorAnimation.value,
                  width: _sizeAnimation.value,
                  height: _sizeAnimation.value,
                  // 旋转 默认以左上角为坐标原点旋转，期望以中心点
                  // transform: Matrix4.rotationZ(pi / 4),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
